<template>
  <div class="setwrap">
    <div class="titlecommon">农事计划</div>
    <div class="panelben">
      <div class="titlecommon2">
        <span>
          {{ isEdit ? '编辑农事模板' : '新增农事模板' }}
        </span>
        <div class="btntwo mt-3">
          <div class="btn mr-2" @click="submit">
            <span class="text"> 保存 </span>
          </div>
          <div class="btn btn-delete mr-2" @click="goback">
            <span class="text" > 取消 </span>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="d-flex">
        <div class="rightContent flex-1">
          <div class="mb-4">
            <div class="cardHeader mb-3">
              <div class="d-flex ai-center mb-1">
                <img :src="titleIcon" alt="">
                <div class="cardTitle">
                  <p class="font-lan-ml">农事计划基本信息</p>
                </div>
              </div>
              <div class="d-flex ai-center">
                <div class="line1"></div>
                <div class="line2"></div>
              </div>
            </div>
            <div>
              <el-form label-position="right" label-width="100px" :model="form.baseInfo" style="max-width: 800px">
                <el-form-item label="模板名称：">
                  <el-input v-model="form.baseInfo.name" placeholder="请输入模板名称" clearable />
                </el-form-item>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="作物类型：">
                      <el-select v-model="form.baseInfo.type" class="m-2 w-100" placeholder="选择作物类型">
                        <el-option label="玉米" value="玉米" />
                        <el-option label="西瓜" value="西瓜" />
                        <el-option label="向日葵" value="向日葵" />
                        <el-option label="辣椒" value="辣椒" />
                        <el-option label="小麦" value="小麦" />
                        <el-option label="苹果" value="苹果" />
                        <el-option label="大米" value="大米" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="作物品种：">
                      <el-select v-model="form.baseInfo.crop" class="m-2 w-100" placeholder="选择作物品种">
                        <el-option label="品种1" value="品种1" />
                        <el-option label="品种2" value="品种2" />
                        <el-option label="品种3" value="品种3" />
                        <el-option label="品种4" value="品种4" />
                        <el-option label="品种5" value="品种5" />
                        <el-option label="品种6" value="品种6" />
                        <el-option label="品种7" value="品种7" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="目标产量：">
                      <el-input v-model="form.baseInfo.yield" placeholder="请输入目标产量" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="土壤质地：">
                      <el-select v-model="form.baseInfo.soilTexture" class="m-2 w-100" placeholder="选择土壤质地">
                        <el-option label="沙土" value="沙土" />
                        <el-option label="壤土" value="壤土" />
                        <el-option label="粘土" value="粘土" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="种植密度：">
                      <el-input v-model="form.baseInfo.density" placeholder="请输入种植密度" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="灌溉方式：">
                      <el-input v-model="form.baseInfo.irrigate" placeholder="请输入灌溉方式" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div>
            <div class="cardHeader mb-3">
              <div class="d-flex ai-center mb-1">
                <img :src="titleIcon" alt="">
                <div class="cardTitle">
                  <p class="font-lan-ml">农事阶段农事计划</p>
                </div>
              </div>
              <div class="d-flex ai-center">
                <div class="line1"></div>
                <div class="line2"></div>
              </div>
            </div>
            <div>
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" type="primary" size="large">
                  <div class="mb-2">
                    {{ activity.content }}
                  </div>
                  <div>
                    <el-table :data="form.planInfo[index]" style="width: 100%">
                      <el-table-column label="农事类型" align="center">
                        <template #default="scoped">
                          <el-select v-model="scoped.row.type" class="m-2" placeholder="选择农事类型">
                            <el-option label="耕地" value="耕地" />
                            <el-option label="播种" value="播种" />
                            <el-option label="施肥" value="施肥" />
                            <el-option label="植保" value="植保" />
                            <el-option label="灌溉" value="灌溉" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="开始日期" align="center">
                        <template #default="scoped">
                          <el-date-picker v-model="scoped.row.startDate" type="date" placeholder="选择开始日期" />
                        </template>
                      </el-table-column>
                      <el-table-column label="结束日期" align="center">
                        <template #default="scoped">
                          <el-date-picker v-model="scoped.row.endDate" type="date" placeholder="选择结束日期" />
                        </template>
                      </el-table-column>
                      <el-table-column label="农资用量和信息" align="center" width="700px">
                        <template #default="scoped">
                          <el-table :data="scoped.row.list">
                            <el-table-column label="农资" align="center">
                              <template #default="scoped1">
                                <el-select v-model="scoped1.row.type" class="m-2" placeholder="选择农资类型">
                                  <el-option label="农资1" value="农资1" />
                                  <el-option label="农资2" value="农资2" />
                                  <el-option label="农资3" value="农资3" />
                                  <el-option label="农资4" value="农资4" />
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column label="用量" align="center">
                              <template #default="scoped1">
                                <el-input v-model="scoped1.row.value" />
                              </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                              <template #default="scoped1">
                                <el-button type="primary">新增</el-button>
                                <el-button v-if="scoped1.$index != 0" type="danger">删除</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </template>
                      </el-table-column>
                      <el-table-column label="农事计划描述" align="center" width="300px">
                        <template #default="scoped">
                          <el-input v-model="scoped.row.remark" :rows="2" type="textarea" />
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center" width="200px">
                        <template #default="scoped">
                          <el-button v-if="scoped.$index == form.planInfo[index].length - 1" type="primary" @click="addPlanInfoItem(index)">新增</el-button>
                          <el-button v-if="form.planInfo[index].length > 1" type="danger" @click="deletePlanInfoItem(index,scoped.$index)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import router from '@/router';

onMounted(async () => {
  //
  let obj = history.state.params
  if(obj){
    isEdit.value = true
    form.baseInfo = {...obj.baseInfo}
    form.planInfo = {...obj.planInfo}
  }
});
const handleNodeClick = (e) => {
  console.log(e)
  if (e.baseInfo && e.planInfo) {
    form.baseInfo = e.baseInfo
    form.planInfo = e.planInfo
    showInfo.value = true
  } else {
    showInfo.value = false
  }
}

const treeData = [
  {
    id: 1,
    label: '全部',
    children: [
      {
        id: 1.1,
        label: '玉米',
        children: [
          {
            label: '玉米种植',
            baseInfo: {
              name: '玉米种植（早熟玉米）',
              type: '玉米',
              crop: '100号玉米',
              yield: '600kg/亩',
              soilTexture: '沙地',
              density: '100亩/株',
              irrigate: '轮灌',
              person: '创建人',
              date: '2023-08-14',
            },
            planInfo: [
              [
                {
                  type: '耕地',
                  startTime: '04-20',
                  endTime: '04-25',
                  list: [{ type: '农资1', value: '1', remark: '农资用量相关信息' }]
                }
              ],
              [
                {
                  type: '播种',
                  startTime: '04-25',
                  endTime: '04-30',
                  list: [{ type: '农资2', value: '2', remark: '农资用量相关信息' }]
                }
              ],
              [
                {
                  type: '施肥',
                  startTime: '04-30',
                  endTime: '05-05',
                  list: [{ type: '农资3', value: '3', remark: '农资用量相关信息' }]
                },
                {
                  type: '植保',
                  startTime: '05-05',
                  endTime: '05-10',
                  list: [{ type: '农资4', value: '4', remark: '农资用量相关信息' }]
                },
                {
                  type: '灌溉',
                  startTime: '05-10',
                  endTime: '05-15',
                  list: [{ type: '农资5', value: '5', remark: '农资用量相关信息' }]
                },
              ],
              [
                {
                  type: '农收',
                  startTime: '05-15',
                  endTime: '05-20',
                  list: [{ type: '农资6', value: '6', remark: '农资用量相关信息' }]
                }
              ],
            ]
          },
          {
            label: '玉米品种2',
          },
          {
            label: '玉米品种3',
          },
        ],
      },
      {
        id: 1.1,
        label: '西瓜',
        children: [
          {
            label: '西瓜麒麟',
            baseInfo: {
              name: '西瓜麒麟',
              type: '西瓜',
              crop: '麒麟瓜',
              yield: '1000kg/亩',
              soilTexture: '沙地',
              density: '100亩/株',
              irrigate: '普灌',
              person: '创建人',
              date: '2023-08-12',
            },
            planInfo: [
              [
                {
                  type: '耕地',
                  startTime: '04-20',
                  endTime: '04-25',
                  list: [{ type: '农资1', value: '1', remark: '农资用量相关信息' }]
                }
              ],
              [
                {
                  type: '播种',
                  startTime: '04-25',
                  endTime: '04-30',
                  list: [{ type: '农资2', value: '2', remark: '农资用量相关信息' }]
                }
              ],
              [
                {
                  type: '灌溉',
                  startTime: '05-10',
                  endTime: '05-15',
                  list: [{ type: '农资5', value: '5', remark: '农资用量相关信息' }]
                },
              ],
              [
                {
                  type: '农收',
                  startTime: '05-15',
                  endTime: '05-20',
                  list: [{ type: '农资6', value: '6', remark: '农资用量相关信息' }]
                }
              ],
            ]
          },
          {
            label: '西瓜品种2',
          },
          {
            label: '西瓜品种3',
          },
        ],
      },
      {
        id: 1.1,
        label: '向日葵',
        children: [],
      },
      {
        id: 1.1,
        label: '辣椒',
        children: [],
      },
      {
        id: 1.1,
        label: '小麦',
        children: [],
      }, {
        id: 1.1,
        label: '苹果',
        children: [],
      }, {
        id: 1.1,
        label: '大米',
        children: [],
      }
    ],
  },
]

const activities = [
  {
    content: '耕地',
  },
  {
    content: '种植',
  },
  {
    content: '管理',
  },
  {
    content: '收获',
  },
]

const searchData = reactive({
  keyword: ''
})

const form: any = reactive({
  baseInfo: {},
  planInfo: [[{list:[{}]}], [{list:[{}]}], [{list:[{}]}], [{list:[{}]}]]
})

const showInfo = ref(false)

const isEdit = ref(false)

const titleIcon = require("@/assets/img/titleIcon.png")

const submit = ()=>{
  console.log(form);
  
}

const addPlanInfoItem = (index) =>{
  form.planInfo[index].push({list:[{}]})
}

const deletePlanInfoItem = (index,index1) =>{
  form.planInfo[index].splice(index1,1)
}

const goback = () =>{
  router.go(-1)
}

</script>
  
<style lang="scss">
.setwrap {

  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }

  .el-pagination.is-background .btn-next {
    background: none !important;
  }

  .btn-prev {
    background: none !important;
  }

  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
    box-shadow: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.setwrap {
  .btn3 {
    width: 100px !important;
    margin-left: 10px;
  }

  .btn7 {
    width: 77px !important;
  }

  .cost {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 20px;

    span {
      font-weight: bold;
      font-size: 25px;
      margin-left: 10px;
    }
  }

  .fy {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .total {
      color: rgba(255, 255, 255, 0.6);
      font-size: 10px;

      span {
        font-size: 20px;
      }
    }
  }

  .table {
    margin-top: 20px;
  }

  .btnwrap {
    display: flex;
    align-items: center;

    .btntext {
      color: rgba(49, 127, 245, 1);
      cursor: pointer;
    }

    .delete {
      color: rgba(245, 98, 98, 1) !important;
    }
  }

  .titlecommon2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn2 {
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px !important;
    margin-top: 20px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 127, 229, 1);
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn-success {
    background: #67C23A;
  }

  .btn-delete {
    background: #F56C6C;
  }

  .success {
    color: #67C23A
  }

  .leftContent {
    min-width: 300px;
  }

  .cardHeader {
    .cardTitle {
      width: 100%;
      height: 32px;
      padding: 4px 8px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .line1 {
      width: 24px;
      height: 4px;
      background: #0856CC;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
    }

    .line2 {
      width: 100%;
      height: 2px;
      background: linear-gradient(243deg, rgba(8, 204, 204, 0) 0%, #0856CC 100%);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }
  }
}
</style>
<style lang="scss">
.el-textarea__inner {
  background-color: transparent !important;
}
</style>
  